<template>
  <el-card :body-style="{ padding: bodyPadding }" class="card-qvil" :shadow="shadow" v-bind="$attrs">
    <!-- 头部 -->
    <template v-if="showHeader" #header>
      <div class="card-header" :style="{ padding: headerPadding }" @click="handleHeaderClick">
        <div class="header-content">
          <div class="header-left">
            <h3 class="title">{{ title }}</h3>
            <p v-if="subtitle" class="subtitle">{{ subtitle }}</p>
          </div>
          <div class="header-right">
            <slot name="header-extra" />
          </div>
        </div>
      </div>
    </template>

    <!-- 内容 -->
    <div v-loading="loading">
      <slot />
    </div>

    <!-- 底部 -->
    <template v-if="showFooter" #footer>
      <div class="card-footer" :style="{ padding: footerPadding }">
        <slot name="footer" />
      </div>
    </template>
  </el-card>
</template>

<script setup lang="ts">
import type { CardEvents, CardOptions } from './types'

const props = withDefaults(defineProps<CardOptions>(), {
  title: '',
  subtitle: '',
  shadow: 'hover',
  border: true,
  padding: '20px',
  headerPadding: '16px 20px',
  bodyPadding: '20px',
  footerPadding: '16px 20px',
  showHeader: true,
  showFooter: false,
  loading: false,
})

const emit = defineEmits<CardEvents>()

// 处理头部点击
const handleHeaderClick = () => {
  emit('header-click')
}
</script>

<style scoped>
.card-qvil {
  width: 100%;
}
.card-header {
  cursor: pointer;
}
.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header-left {
  flex: 1;
}
.header-right {
  flex: 0 0 auto;
}
.title {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--el-text-color-primary);
}
.subtitle {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--el-text-color-secondary);
}
.card-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
</style>
